<template>
  <div class="app-container">
    <div>
      <el-form
        :model="orderForm"
        label-position="right"
        label-width="130px"
        ref="orderForm"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="姓名:" prop="name">
              <el-input
                v-model="orderForm.name"
                placeholder="请输入内容"
                size="small"
                style="width: 150px"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="身份证号:" prop="idCardNumber">
              <el-input
                v-model="orderForm.idCardNumber"
                placeholder="请输入内容"
                size="small"
                style="width: 150px"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="手机号:" prop="phone">
              <el-input
                v-model="orderForm.phone"
                placeholder="请输入内容"
                size="small"
                style="width: 150px"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="流水号:" prop="serialNumber">
              <el-input
                v-model="orderForm.serialNumber"
                placeholder="请输入内容"
                size="small"
                style="width: 150px"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品名称:" prop="productName">
              <el-input
                v-model="orderForm.productName"
                placeholder="请输入内容"
                size="small"
                style="width: 150px"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订单状态:" prop="orderStatus">
              <el-select
                v-model="orderForm.orderStatus"
                placeholder="请选择"
                style="width: 150px"
              >
                <el-option
                  v-for="item in orderstatus_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="订单金额从:" prop="orderPriceFrom">
              <el-input
                v-model="orderForm.orderPriceFrom"
                placeholder="订单金额区间"
                size="small"
                style="width: 150px"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="至:" prop="orderPriceTo">
              <el-input
                v-model="orderForm.orderPriceTo"
                placeholder="订单金额区间"
                size="small"
                style="width: 150px"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="支付时间从:" prop="payTimeFrom">
              <el-input
                v-model="orderForm.payTimeFrom"
                placeholder="支付时间区间"
                size="small"
                style="width: 150px"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="截止至:" prop="payTimeTo">
              <el-input
                v-model="orderForm.payTimeTo"
                placeholder="支付时间区间"
                size="small"
                style="width: 150px"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="激活时间从:" prop="effectiveDate">
              <el-input
                v-model="orderForm.effectiveDate"
                placeholder="激活时间区间"
                size="small"
                style="width: 150px"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="截止至:" prop="expireDate">
              <el-input
                v-model="orderForm.expireDate"
                placeholder="激活时间区间"
                size="small"
                style="width: 150px"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-form-item>
            <el-button
              type="success"
              icon="plus"
              style="width: 80px"
              @click="searchByOrder"
              >筛选</el-button
            >
            <!-- v-if="hasPerm('strategy:auto')" -->
            <el-button
              type="danger"
              icon="plus"
              style="width: 80px"
              @click="resetsearchByOrder"
              >重置</el-button
            >
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <el-table
      :data="orderTable"
      v-loading.body="listLoading"
      element-loading-text="拼命加载中"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column
        align="center"
        label="id"
        prop="id"
        width="150"
        v-if="false"
      ></el-table-column>
       <el-table-column
        align="center"
        label="phone"
        prop="phone"
        width="150"
        v-if="false"
      ></el-table-column>
      <el-table-column
        align="center"
        label="idCardNumber"
        prop="idCardNumber"
        width="150"
        v-if="false"
      ></el-table-column>
       <el-table-column
        align="center"
        label="effectiveDate"
        prop="effectiveDate"
        width="150"
        v-if="false"
      ></el-table-column>
       <el-table-column
        align="center"
        label="expiryDate"
        prop="expiryDate"
        width="150"
        v-if="false"
      ></el-table-column>
       <el-table-column
        align="center"
        label="orderSource"
        prop="orderSource"
        width="150"
        v-if="false"
      ></el-table-column>
      <el-table-column
        align="center"
        label="订单流水号"
        prop="serialNumber"
        width="150"
      ></el-table-column>
      <el-table-column
        align="center"
        label="用户"
        prop="name"
        width="150"
      ></el-table-column>
      <el-table-column
        align="center"
        label="订单金额"
        prop="price"
        width="200"
      ></el-table-column>
      <el-table-column
        align="center"
        label="产品名称"
        prop="productName"
        width="150"
      ></el-table-column>
      <el-table-column
        align="center"
        label="支付时间"
        prop="payTime"
        width="200"
      >
        <template slot-scope="scope">
          {{ scope.row.payTime ? parseTime(scope.row.payTime) : null }}
        </template></el-table-column
      >
      <el-table-column
        align="center"
        label="订单状态"
        prop="orderStatus"
        width="150"
      >
        <template slot-scope="scope">
          {{ scope.row.orderStatus | checkStatus(orderstatus_options) }}
        </template></el-table-column
      >

      <el-table-column align="center" label="操作" fixed="right" width="150">
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="edit"
            @click="showOrderDetails(scope.row)"
            >详情</el-button
          >
          <!-- v-if="hasPerm('user:update')" -->
           <!-- v-if="scope.row.orderStatus == 'EFFECTIVE'" -->
          <el-button
           
            type="text"
            icon="edit"
            @click="refundShowDetail(scope.row)"
            >退款</el-button
          >
          <!-- v-if="hasPerm('user:update')" -->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleOrderSizeChange"
      @current-change="handleCurrentOrderChange"
      :current-page="listQuery.pageNum"
      :page-size="listQuery.pageRow"
      :total="totalOrderCount"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
    <el-dialog
      title="详情"
      :visible.sync="dialogOrderDetailVisible"
      style="min-width: 800px"
    >
      <el-form
        :model="orderDetailForm"
        label-position="left"
        style="margin-left: 20px"
        ref="orderDetailForm"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="姓名:"
              label-width="110px"
              style="width: 300px"
            >
              {{ orderDetailForm.name }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="手机号:"
              label-width="110px"
              style="width: 300px"
            >
              {{ orderDetailForm.phone }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="产品名称:"
              label-width="110px"
              style="width: 300px"
            >
              {{ orderDetailForm.productName }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="身份证号:"
              label-width="110px"
              style="width: 300px"
            >
              {{ orderDetailForm.idCardNumber }}
            </el-form-item></el-col
          ></el-row
        >
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="流水号:"
              label-width="110px"
              style="width: 300px"
            >
              {{ orderDetailForm.serialNumber }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="订单状态:"
              label-width="110px"
              style="width: 300px"
            >
              {{ orderDetailForm.orderStatus | checkStatus(orderstatus_options) }}
            </el-form-item>
          </el-col></el-row
        >
        <el-row>
          <el-col :span="12">
        <el-form-item
          label="订单金额:"
          label-width="110px"
          style="width: 300px"
        >
          {{ orderDetailForm.price }}
        </el-form-item>
          </el-col>
        <el-col :span="12">
        <el-form-item
          label="支付时间:"
          label-width="110px"
          style="width: 300px"
        >
          {{ orderDetailForm.payTime }}
        </el-form-item>
       </el-col></el-row>
       <el-row>
          <el-col :span="12">
        <el-form-item
          label="激活时间从:"
          label-width="110px"
          style="width: 300px"
        >
          {{ orderDetailForm.effectiveDate }}
        </el-form-item>
          </el-col>
          <el-col :span="12">
        <el-form-item
          label="激活时间截至:"
          label-width="110px"
          style="width: 300px"
        >
          {{ orderDetailForm.expireDate }}
        </el-form-item>
          </el-col>
       </el-row>
        <el-form-item
          label="购买渠道:"
          label-width="110px"
          style="width: 300px"
        >
          {{ orderDetailForm.orderSource }}
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      title="退款"
      :visible.sync="dialogRefundOrderlVisible"
      style="min-width: 800px"
    >
      <el-form
        :model="refundOrderDetailForm"
        :rules="refundOrderDetailFormRules"
        label-position="left"
        style="margin-left: 20px"
        ref="refundOrderDetailForm"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item
              label="姓名:"
              label-width="110px"
              style="width: 300px"
            >
              {{ refundOrderDetailForm.name }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item
              label="流水号:"
              label-width="110px"
              style="width: 300px"
            >
              {{ refundOrderDetailForm.serialNumber }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item
              label="产品名称:"
              label-width="110px"
              style="width: 300px"
            >
              {{ refundOrderDetailForm.productName }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item
            label="退款金额:"
            label-width="110px"
            style="width: 300px"
            prop="price"
            >
              <el-input v-model="refundOrderDetailForm.price" autocomplete="off" />
            </el-form-item>
          </el-col>
       </el-row>
       <el-row>
          <el-col :span="24">
            <el-form-item
            label="退款原因:"
            label-width="110px"
            style="width: 300px"
            prop="reason"
            >
              <el-input type="textarea" :rows="2" v-model="refundOrderDetailForm.reason" autocomplete="off" />
            </el-form-item>
          </el-col>
       </el-row>
       <el-row type="flex" justify="center">
          <el-form-item>
            <el-button
              type="success"
              icon="plus"
              style="width: 80px"
              @click="refund()"
              :loading="loading"
              >退款</el-button
            >
            <!-- v-if="hasPerm('strategy:auto')" -->
            <el-button
              type="danger"
              icon="plus"
              style="width: 80px"
              @click="close()"
              >取消</el-button
            >
          </el-form-item>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      totalOrderCount: 0, //分页组件--数据总条数
      dialogOrderDetailVisible: false,
      orderTable: [], //表格的数据
      listLoading: false, //数据加载等待动画
      listLoadingDialog: false,
      loading: false,
      listQuery: {
        pageNum: 1, //页码
        pageRow: 10, //每页条数
      },

      activeName: "first",
      dialogStatus: "details",
      dialogRefundOrderlVisible:false,
      dialogLogVisible: false,
      textMap: {
        details: "查看详情",
      },
      datetimeValue: "",
      orderForm: {
        name: "",
        phone: "",
        serialNumber: "",
        idCardNumber: "",
        productName: "",
        orderStatus: "",
        orderPriceFrom: "",
        orderPriceTo: "",
        payTimeFrom: "",
        payTimeTo: "",
        effectiveDate: "",
        expireDate: "",
      },
      orderDetailForm: {
        name: "",
        phone: "",
        serialNumber: "",
        idCardNumber: "",
        productName: "",
        orderStatus: "",
        price: "",
        payTime: "",
        orderSource: "",
        effectiveDate: "",
        expireDate: "",
      },
       refundOrderDetailForm: {
        id:"",
        name: "",
        serialNumber: "",
        productName: "",
        price: "",
        reason:""
      },
      orderstatus_options: [
        {
          value: "WAITTING_PAYMENT",
          label: "待支付",
        },
        {
          value: "CANCELED",
          label: "已取消",
        },
        {
          value: "WAITTING_EFFECTIVE",
          label: "待生效",
        },
        {
          value: "OVER_DUE",
          label: "已过期",
        },
        {
          value: "EFFECTIVE",
          label: "生效中",
        },
        {
          value: "REFUNDED",
          label: "已退款",
        },
        {
          value: "END",
          label: "已结束",
        },
      ],
      deviceStrategyorderTableData: [],
      laneorderTableData: [],
      logId: "",
      allDropDown: "",
      refundOrderDetailFormRules: {
        price: [
          { required: true, trigger: "blur", message: "请输入金额" }
        ],
        reason: [{ required: true, trigger: "blur", message: "请输入退款原因" }]
      },
    };
  },
  created() {
    this.searchByOrder();
  },
  filters: {
    checkStatus: function (status, list) {
      let obj = list.find((item) => item.value === status);
      if (obj) {
        return obj.label ? obj.label : "";
      } else {
        return "";
      }
    },
  },
  methods: {
    searchByOrder() {
      //查询列表
      let url =
        "/order/find/" + this.listQuery.pageNum + "/" + this.listQuery.pageRow;
      this.listLoading = true;
      let data = {};

      data = {
        name: this.orderForm.advancePayOrdernamed,
        phone: this.orderForm.phone,
        serialNumber: this.orderForm.serialNumber,
        idCardNumber: this.orderForm.idCardNumber,
        productName: this.orderForm.productName,
        orderStatus: this.orderForm.orderStatus,
        orderPriceFrom: this.orderForm.orderPriceFrom,
        orderPriceTo: this.orderForm.orderPriceTo,
        payTimeFrom: this.orderForm.payTimeFrom,
        payTimeTo: this.orderForm.payTimeTo,
        effectiveDate: this.orderForm.effectiveDate,
        expireDate: this.orderForm.expireDate,
      };
      this.api({
        url: url,
        method: "post",
        data: data,
      }).then((data) => {
        this.listLoading = false;
        this.orderTable = data.data.datas;
        this.totalOrderCount = data.data.total;
      });
    },
    resetsearchByOrder() {
      this.$refs.orderForm.resetFields();
    },
     handleOrderFilter() {
      this.listQuery.pageNum = 1;
      this.searchByOrder();
    },
    handleOrderSizeChange(val) {
      //改变每页数量
      this.listQuery.pageRow = val;
      this.handleOrderFilter();
    },
    handleCurrentOrderChange(val) {
      //改变页码
      this.listQuery.pageNum = val;
      this.searchByOrder();
    },

    getIndex($index) {
      //表格序号
      return (this.listQuery.pageNum - 1) * this.listQuery.pageRow + $index + 1;
    },
    showOrderDetails(row) {
      this.dialogOrderDetailVisible=true
            this.orderDetailForm.name = row.name;
            this.orderDetailForm.phone = row.phone;
            this.orderDetailForm.productName = row.productName;
            this.orderDetailForm.idCardNumber = row.idCardNumber;
            this.orderDetailForm.serialNumber = row.serialNumber;
            this.orderDetailForm.orderStatus = row.orderStatus;
            this.orderDetailForm.price = row.price;
            this.orderDetailForm.payTime = row.payTime;
            this.orderDetailForm.effectiveDate = row.effectiveDate;
            this.orderDetailForm.expireDate = row.expiryDate;
            this.orderDetailForm.orderSource = row.orderSource;

    },
    refundShowDetail(row) {
      this.dialogRefundOrderlVisible = true
      this.refundOrderDetailForm.id = row.id
      this.refundOrderDetailForm.name = row.name
      this.refundOrderDetailForm.serialNumber = row.serialNumber
      this.refundOrderDetailForm.productName = row.productName
    },
    refund()
    {
        this.$refs.refundOrderDetailForm.validate(valid => {
            if (valid) {
                this.loading = true;
                let url = "order/refund";
                let params={
                  orderId:this.refundOrderDetailForm.id,
                  balance:this.refundOrderDetailForm.price,
                  reason:this.refundOrderDetailForm.reason
                }
                this.api({
                  url: url,
                  method: "post",
                  data: params,
                }).then((data) => {
                  if(data.errorMessage)
                  {
                      this.$message.info(data.errorMessage);
                  }
                  this.loading = false;
                  this.dialogRefundOrderlVisible=false;
                  
                });
            }
        })
     
    },
    close()
    {
       this.dialogRefundOrderlVisible=false;
    },

  },
};
</script>
